<template>
  <div class="container">
    <el-card>
      <!-- 面包屑 -->
      <div v-show="breadShow">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider id="divider"></el-divider>
      </div>
      <!-- 第一行 -->
      <el-row>
        <el-col :span="5">
          标签名称<el-input v-model="query.tagName" placeholder="请输入内容">
          </el-input>
        </el-col>
        <el-col :span="6">
          状态
          <el-select v-model="query.state" placeholder="请选择">
            <el-option label="已禁用" value="0"></el-option>
            <el-option label="已开启" value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="getTagsList">搜索</el-button>
        </el-col>

        <el-col :span="5">
          <el-button
            type="success"
            icon="el-icon-edit"
            class="btn-add"
            @click="showAddDialog"
            >新增标签</el-button
          >
        </el-col>
        <el-col :span="3">
          <i
            class="el-icon-back"
            id="icon"
            @click="backTo"
            v-show="iconShow"
          ></i>
          <el-button type="text" @click="backTo" v-show="iconShow"
            >返回学科</el-button
          >
        </el-col>
      </el-row>
      <!-- 警示框 -->
      <el-alert
        :title="`查询到数据共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table border :data="tagsList" style="width: 100%">
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="creatorID" label="创建者">
          <template slot-scope="scope">
            <span v-if="scope.row.creatorID == 2">超级管理员</span>
            <span v-else>普通管理员</span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1"> 已启用</span>
            <span v-else> 已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="changeBtnState(scope.row)">{{
              scope.row.state == 1 ? "禁用" : "启用"
            }}</el-button>

            <el-button
              type="text"
              :disabled="scope.row.state == 1 ? false : true"
              @click="showEditDialog(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state == 1 ? false : true"
              @click="deleteEditDialog(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 新增标签弹框 -->
    <el-dialog
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="40%"
      center
      @close="closeAddDialog"
    >
      <!-- 表单 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
      >
        <!-- 下拉选择框 -->
        <el-form-item label="所属学科" prop="subjectID" v-show="addFormSelShow">
          <el-select v-model="addForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in subjectsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="addForm.tagName" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改标签弹框 -->
    <el-dialog
      title="修改标签"
      :visible.sync="editDialogVisible"
      width="40%"
      center
      @close="closeEditDialog"
    >
      <!-- 表单 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >
        <!-- 下拉选择框 -->
        <el-form-item label="所属学科" prop="subjectID" v-show="addFormSelShow">
          <el-select v-model="editForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in subjectsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="editForm.tagName" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  changeState,
  update,
  remove,
  detail,
} from "@/api/hmmm/tags.js";
import { simple } from "@/api/hmmm/subjects.js";
export default {
  data() {
    return {
      // 获取标签列表的参数；如果不需要某个属性就把它设置为null,不要设置为''，否则传递过来的数据不一样
      query: {
        tagName: null,
        state: null,
        page: 1,
        subjectID: null,
        pagesize: 10,
      },

      tagsList: [], //标签列表数组
      total: 0, //返回的数据的总数，为分页服务

      addDialogVisible: false,
      subjectsList: [], //获取的简单学科列表数组
      addForm: {
        subjectID: null,
        tagName: "",
      },
      addFormRules: {
        tagName: [
          { required: true, message: "请输入标签名称", trigger: "blur" },
        ],
      },
      editDialogVisible: false,
      editForm: {
        subjectID: "",
        tagName: "",
      },
      editFormRules: {
        tagName: [
          { required: true, message: "请输入标签名称", trigger: "blur" },
        ],
      },

      anotherSubjectName: "", //页面跳转传递过来的学科名称值
      addFormSelShow: true, //添加和编辑表单的下拉框是否显示v-show绑定的值
      iconShow: true, //<-返回学科是否显示v-show绑定的值
      breadShow: true, //面包屑和横线是否显示v-show绑定的值
    };
  },
  created() {
    this.getTagsList();
    //从学科页面点击学科标签跳转过来传递了subjectID值后触发的函数
    this.getAnotherTagsList();
  },
  mounted() {
    // 从学科页面点击学科标签跳转过来后接受2个参数：id值和name值
    // 把接收到的id值赋值给query.subjectID 值
    // 把接收到的name值赋值给自定义的anotherSubjectName值
    this.query.subjectID = this.$route.query.id;
    this.anotherSubjectName = this.$route.query.name;
    //如果不给添加表单赋值的话 在从学科点击进标签页的时候新增功能会失效 因为传入的subjectID没有
    this.addForm.subjectID = this.$route.query.id;
    // 因为从左侧菜单直接点击标签页和从学科里点击学科标签是同一个页面
    // 但是有几处是不一样的 通过this.query.subjectID是不是undefined来判断是从哪个页面进来的 控制它们的显示隐藏
    // 如果this.query.subjectID == undefined说明是从左侧菜单点击的  没有传递值
    // 如果this.query.subjectID != undefined说明是从学科里点击的  传递过来了值

    if (this.query.subjectID == undefined) {
      this.addFormSelShow = true;
      this.iconShow = false;
      this.breadShow = false;
    } else {
      this.addFormSelShow = false;
      this.iconShow = true;
      this.breadShow = true;
    }
  },
  methods: {
    // 获取标签列表
    async getTagsList() {
      const res = await list(this.query);
      // console.log(res);
      if (res.status !== 200)
        return this.$message.error("获取标签列表数据失败");
      this.tagsList = res.data.items;
      this.total = res.data.counts;
      // console.log(this.tagsList, this.total);
    },
    // 分页pagesize变化触发的函数
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getTagsList();
    },
    // 分页page变化触发的函数
    handleCurrentChange(val) {
      this.query.page = val;
      this.getTagsList();
    },
    // 清除按钮 表单和下拉框置为初始值  调用列表函数
    clear() {
      this.query.tagName = null;
      this.query.state = null;
      this.getTagsList();
    },
    // 点击新增标签对话框出现 并且所属学科的下拉选择框显示数据
    showAddDialog() {
      this.addDialogVisible = true;
      this.getSubjectList();
    },
    // 封装函数  获取学科简单列表 主要是为新增和编辑弹框里的下拉选择框的数据服务
    async getSubjectList() {
      const res = await simple();
      // console.log(res);
      if (res.status !== 200)
        return this.$message.error("获取简单学科列表数据失败");
      this.subjectsList = res.data;
      // console.log(this.subjectsList);
    },
    // 新增表单的重置
    closeAddDialog() {
      this.$refs.addFormRef.resetFields();
    },
    // 点击新增对话框的确定按钮 发请求
    saveAddDialog() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        const res = await add(this.addForm);
        // console.log(res);
        if (res.status !== 200) return this.$message.error("新增标签数据失败");
        this.getTagsList();
        this.addDialogVisible = false;
      });
    },
    // 点击操作列的启用禁用按钮 控制状态列里的数据变化
    async changeBtnState(row) {
      // console.log(row);
      if (row.state == 1) {
        row.state = 0;
      } else {
        row.state = 1;
      }
      const res = await changeState(row);
      // console.log(res);
      if (res.status !== 200) return this.$message.error("操作状态失败");
      this.$message.success("操作成功");
    },
    // 点击修改按钮出现弹框 并且出现下拉选择框里的数据 只需要调用一下
    showEditDialog(row) {
      this.editForm = row;
      this.editDialogVisible = true;
      this.getSubjectList();
    },
    // 关闭修改弹框 让表单重置
    closeEditDialog() {
      this.$refs.editFormRef.resetFields();
    },
    // 点击编辑弹框的确定按钮就发请求
    saveEditDialog() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        const res = await update(this.editForm);
        // console.log(res);
        if (res.status !== 200) return this.$message.error("修改标签数据失败");
        this.$message.success("修改成功");
        this.getTagsList();
        this.editDialogVisible = false;
      });
    },
    // 点击删除按钮  弹框出现 提示是否删除
    async deleteEditDialog(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("已取消删除");
      const res = await remove(row);
      // console.log(res);
      if (res.status !== 200) return this.$message.error("删除标签失败");
      this.$message.success("删除成功");
      this.getTagsList();
    },

    // 学科页点击传递过来的事件处理函数

    // 根据学科id获取标签列表
    // 传递过来的id值其实就是学科id，指的是初始query里的subjectID的值，把传递过来的值重新赋值给subjectID，再重新调用函数，获取最新的列表数据
    async getAnotherTagsList() {
      const res = await list(this.query);
      // console.log(res);
      if (res.status !== 200)
        return this.$message.error("获取根据id值的标签列表数据失败");
    },
    // 点击返回学科就跳转到学科页面
    backTo() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  min-width: 1366px;
  .el-card {
    margin: 20px;
    padding-top: 20px;
  .el-row {
    .el-input {
      width: 65%;
    }
    .btn-add {
      margin-left: -25px;
    }
    #icon {
      color: #66b1ff;
    }
  }
  #divider {
    margin: 18px 0;
  }
  .el-alert {
    margin-top: 25px;
  }
  .el-table {
    margin-top: 15px;
  }
  .el-pagination {
    margin-top: 15px;
    text-align: right;
  }
  }
  
}
</style>
